<template>
  <div class="box">
    <!-- <transition name="ly" mode="out-in">
      <component :is=""> -->
        <SearchVue class="SearchVue"></SearchVue>
        <div class="content">
          <BannerVue></BannerVue>
          <StoreListVue></StoreListVue>
        </div>
        <FooterVue class="footer"></FooterVue>
      <!-- </component>
    </transition> -->
  </div>
</template>

<script>
import SearchVue from "@/components/Search.vue";
import BannerVue from "@/components/Banner.vue";
import StoreListVue from "@/components/StoreList.vue";
import FooterVue from "@/components/Footer.vue";
export default {
  name: "Home",
  components: {
    SearchVue,
    BannerVue,
    StoreListVue,
    FooterVue,
  },
};
</script>

<style scoped>
.box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.SearchVue {
  height: 40px;
}
.footer {
  height: 40px;
}
.content {
  flex: 1;
  overflow: auto;
}

.ly-enter {
  /* 入场动画的初始状态 */
  opacity: 0;
}
.ly-enter-active {
  /* 入场动画执行过程中的状态 */
  transition: all 2s;
}
.ly-enter-to {
  /* 入场动画执行结束时的状态 */
  opacity: 1;
}

.ly-leave {
  /* 离场动画的初始状态 */
  opacity: 1;
}
.ly-leave-active {
  /* 离场动画执行过程中的状态 */
  transition: all 1s;
}
.ly-leave-to {
  /* 离场动画执行结束时的状态 */
  opacity: 0;
}
</style>
